<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框</title>
		<style>
			/* 练习：1.圆形 2.正三角形
			 思路一：宽高与倒角边框一致
			 思路二：div#di    css中：抓到div 左边框：50px实线红色
			                                右边框：50px实线黄色
									
											下边框：50px实线黑色
						注意：线别加宽高  tranparent  透明色
			 */
			#a{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				}
				#triangle{
					width: 0px;
					height: 0px;
					border: 100px solid transparent;
					border-top-color: rgba(0, 0, 255, .3);
					
					  
					             
					
				}
				/* 边框阴影 box-shadow 属性 */
				#a1{
					width: 100px;
					height: 100px;
					border: 1px solid black;
					box-shadow: 1px 1px 70px 1px rebeccapurple inset;
				}
				/* outline 边框轮廓 */
				input{
					outline: 0;
					
				}
				/* 实际应用：通配选择器  去掉轮廓*/
				button{
					outline: 0;
				}	
				
		</style>
	</head>
	<body>
		<div id="a"></div>
		<div id="triangle"></div>
		<div id="a1"></div>
		边框：<input type="text" id="a3" />
		<button>chi</button>
	</body>
</html>